﻿
@{
    Layout = "~/Views/Shared/_Layout.cshtml";

    List<string> nodes = ViewBag.nodes;
} 
 


<div class="panel panel-default"> 
    
    <div class="panel-body" style="padding-left:30px;padding-right:30px;padding-top:30px;min-height:720px">

        <div class="row" style="padding-left:13px;padding-right:13px">

            <div class="panel panel-default">
                <div class="panel-body shadow-box" style="padding-bottom:20px">

                    <div class="form-inline form">

                        <div class="col-sm-12" style="margin-top:10px">  

                            <b><i class="glyphicon glyphicon-signal"></i> 服务节点</b>

                            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="服务节点是WebAPI请求的服务节点，点击选中和取消节点" style="font-size:20px;top:0.2em;cursor:pointer;"></span>

                            @*<button type="button" onclick="select_all(this)" style="width:60px;margin-right:8px;margin-left:8px" class="btn btn-success btn-xs">全选</button>

        <button type="button" onclick="select_reverse(this)" style="width:60px;margin-right:8px;" class="btn btn-success btn-xs">反选</button>*@

                        </div>

                        <div class="col-sm-12 node-row" style="margin-top:8px;margin-bottom:8px;min-height:44px">

                            @foreach (var item in nodes)
                            {
                                <button onclick="check_node(this)" style="width:120px;margin-left:20px;border-radius:4px;" class="btn btn-info service-button">@item</button>
                            } 

                        </div>

                    </div>


                    <div class="form-inline form" style="margin-bottom:30px;">

                        <div class="col-sm-3">
                            <label class="form-label">开始时间</label>
                            <input type="text" class="form-control laydate start">
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">结束时间</label>
                            <input type="text" class="form-control laydate end">
                        </div>

                    </div>

                    <div class="col-sm-12 timeSelect" style="margin-top:20px">

                        <button type="button" onclick="timeChange(this)" data-id="1" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">今天</button>

                        <button type="button" onclick="timeChange(this)" data-id="2" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">昨天</button>

                        <button type="button" onclick="timeChange(this)" data-id="3" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">本周</button>

                        <button type="button" onclick="timeChange(this)" data-id="4" style="width:60px;margin-right:8px;" class="btn btn-default btn-xs">本月</button>

                    </div> 

                    <div class="col-sm-12" style="">

                        <div class="col-sm-3" style="padding-left:0">

                            <button style="min-width:120px;" onclick="QueryClick(this)" class="btn btn-info btn-search">查询</button>

                        </div>

                    </div>

                </div>
            </div>

        </div>

        <div class="row" style="margin-top:30px;padding-left:13px;padding-right:13px"> 

            <div class="board-row panel panel-default panel-body shadow-box">

                <p class="index_time_range" style="padding-left:20px;color:#3c763d">
                    时间：<b></b>

                </p>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">

                    <div class="smallstat teal-bg">

                        <b class="glyphicon glyphicon-info-sign badgeIcon" data-toggle="tooltip" data-placement="auto" title="请求次数是所有的接口请求次数,包括404,500等"></b>

                        <b><span class="value">0</span></b>
                        <h4>请求次数</h4>

                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat blue-bg">

                        <b class="glyphicon glyphicon-info-sign badgeIcon" data-placement="auto" data-toggle="tooltip"  title="处理时间是接口处理的时间，不能看做处理时间"></b>

                        <b><span class="value">0</span></b>
                        <h4>平均处理时间 (ms)</h4>

                    </div>
                </div>


                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat purple-bg">

                        <b><span class="value">0</span></b>
                        <h4>404</h4>

                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat orange-bg">

                        <b><span class="value">0</span></b>
                        <h4>500</h4>

                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat blue-bg">
                        <b><span class="value">0</span></b>
                        <h4>错误率占比</h4>
                    </div>
                </div>

                <div class="col-lg-2 col-sm-6 col-xs-6 col-xxs-12">
                    <div class="smallstat purple-bg">
                        <b><span class="value">0</span></b>
                        <h4>接口总数 (已请求)</h4>
                    </div>
                </div>

            </div> 

        </div> 

        <div class="row" style="margin-top:40px;">

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">
                        <div id="StatusCodePie" style="height:320px;width:99%"></div>
                    </div>
                </div>

            </div>

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">
                        <div id="ResponseTimePie" style="height:320px;width:99%"></div>
                    </div>
                </div>

            </div>

        </div> 

        <div class="row">

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12" style="padding-left:32px;">

                            <div class="row form-inline">

                                <label class="form-label">选择数量</label>
                                <select onchange="changeTopCount(this)" class="form-control topCount" style="min-width:120px">
                                    <option value="10">10</option>
                                    <option value="15">15</option>
                                    <option value="20">20</option>
                                </select>

                            </div>

                        </div>

                        <div class="col-sm-12">

                            <div id="MostRequestChart" style="min-height:420px; width:99%"></div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12" style="padding-left:32px;min-height:34px">



                        </div>


                        <div class="col-sm-12">

                            <div id="Code500RequestChart" style="min-height:420px; width:99%"></div>

                        </div>

                    </div>
                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12">

                            <div id="FastARTChart" style="min-height:420px; width:99%"></div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-6">

                <div class="panel panel-default">
                    <div class="panel-body shadow-box">

                        <div class="col-sm-12">

                            <div id="SlowARTChart" style="min-height:420px; width:99%"></div>

                        </div>

                    </div>
                </div>

            </div>

        </div>  

    </div>

</div>


 
<script src="/Content/page/index.js?ver=1.0.1"></script> 
 